<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using Lisk-JS</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="example/css/style.css">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><span><img width="25" height="25" src="example/lisk.png" alt="Lisk" /></span> lisk-js</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">HOME</a></li>
                <li><a href="example/api.html">API</a></li>
                <li><a href="example/experiment.html">EXPERIMENT</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container">
    <div class="starter-template">
        <div class="row">
            <div class="col-md-6">
                <img src="lisk-js.png" width="300" height="300" alt="Lisk" />
            </div>
            <div class="col-md-6">
                <div class="row">
                    <p><strong>Use with nodejs:</strong></p>
                    <figure class="highlight">
                    <pre>
                        <code class="language-html" data-lang="html">npm install lisk-js</code>
                    </pre>
                    </figure>

                    <p><strong>Use in the browser:</strong></p>
                    <figure class="highlight">
                    <pre>
                        <code class="language-html" data-lang="html">&lt;script src="dist/lisk-js.js"&gt;&lt;/script&gt;</code>
                    </pre>
                    </figure>

                    <p><strong>Or use the CDN:</strong></p>
                    <figure class="highlight">
                    <pre>
                        <code class="language-html" data-lang="html">&lt;script src="https://gitcdn.xyz/repo/LiskHQ/lisk-js/development/dist/lisk-js.js"&gt;&lt;/script&gt;</code>
                    </pre>
                    </figure>
                </div>
            </div>
        </div>

        <p>Lisk JS is a JavaScript library for <a href="https://github.com/LiskHQ/lisk">Lisk - the cryptocurrency and blockchain application platform</a>. It allows developers to create offline transactions and broadcast them onto the network. It also allows developers to interact with the core Lisk API, for retrieval of collections and single records of data located on the Lisk blockchain. Its main benefit is that it does not require a locally installed Lisk node, and instead utilizes the existing peers on the network. It can be used from the client as a <a href="http://browserify.org/">browserify</a> compiled module, or on the server as a standard Node.js module.</p>

        <h3>Development</h3>

        <p>Lisk-js is open sourced under the GNU General Public License version 3. Developers are invited to explore the code, or even improve it and help us make it better.</p>

        <p>Clone and install the repository from GitHub:</p>

        <figure class="highlight">
            <pre>
                <code class="language-html" data-lang="html">git clone https://github.com/LiskHQ/lisk-js</code>
            </pre>
            <pre>
                <code class="language-html" data-lang="html">cd lisk-js</code>
            </pre>
            <pre>
                <code class="language-html" data-lang="html">npm install</code>
            </pre>
        </figure>

        <p>To run the test suite, use the following command:</p>

        <figure class="highlight">
            <pre>
                <code class="language-html" data-lang="html">npm test</code>
            </pre>
        </figure>

        <p>Lisk-js uses <a href="https://gruntjs.com/">grunt</a> as a task runner. The default grunt task compiles the browserify module, runs a static code analysis using <a href="http://eslint.org/">eslint</a>, and executes the test suite. Upon completion, a watch task will monitor for further code changes, and then re-execute the same tasks.</p>

        <p>To execute the default grunt task, use the following command:</p>

        <figure class="highlight">
            <pre>
                <code class="language-html" data-lang="html">grunt</code>
            </pre>
        </figure>

        <p>The codebase is documented using <a href="http://yui.github.io/yuidoc/">yuidoc</a>. To generate the documentation, use the following command:</p>

        <figure class="highlight">
            <pre>
                <code class="language-html" data-lang="html">yuidoc .</code>
            </pre>
        </figure>

        <!--
        <h3>Projects using lisk-js</h3>
        -->
    </div>
</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://gitcdn.xyz/repo/LiskHQ/lisk-js/development/dist/lisk-js.js"></script>

<script>
'use strict';

$(function () {
    $('a[href="#toggle-search"], .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn[type="reset"]').on('click', function (event) {
        event.preventDefault();
        $('.navbar-bootsnipp .bootsnipp-search .input-group > input').val('');
        $('.navbar-bootsnipp .bootsnipp-search').toggleClass('open');
        $('a[href="#toggle-search"]').closest('li').toggleClass('active');

        if ($('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) {
            /* I think .focus dosen't like css animations, set timeout to make sure input gets focus */
            setTimeout(function () {
                $('.navbar-bootsnipp .bootsnipp-search .form-control').focus();
            }, 100);
        }
    });

    $(document).on('keyup', function (event) {
        if (event.which == 27 && $('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) {
            $('a[href="#toggle-search"]').trigger('click');
        }
    });
});
</script>

</body>
</html>
